<!--这个例子是一个演示的文件，如需使用组件，-->
<!--需要将该文件的代码复制修改，写入common文件夹下的mainArea.vue-->

<template>
  <!--以下是添加按钮组件，
  btnclass可修改按钮样式，
  btntext可修改按钮内文字，
  @btnclick="add"可修改点击事件，add函数名可自定义-->
  <buttons btnclass="add" btntext="添加" @btnclick="add"><!--添加按钮-->
    <!--以下是添加插槽：以添加一个icon图标为例-->
    <span slot="btn" class="el-icon-edit"></span><!--添加插槽示例-->
  </buttons>
  <buttons btnclass="del" btntext="删除"></buttons><!--删除按钮-->
  <buttons btnclass="change" btntext="修改"></buttons><!--修改按钮-->
  <buttons btnclass="refer" btntext="查询"></buttons><!--查询按钮-->
  <buttons btnclass="derive" btntext="导出Excel表格"></buttons><!--导出到Excel表格按钮-->
</template>

<script>
  import buttons from '../zys/buttons'//引入按钮组件
    export default {
        name: "button组件操作示例",
      components:{
          buttons
      },
      method:{
          add(){//此处写自定义点击事件
            console.log(111);
          }
      }
    }
</script>

<style scoped>

</style>
